<template>
  <div id="OnlineBooking">
    <el-row>
      <el-col :span="4" class="div_border_title">
        <h2>在线预定</h2>
      </el-col>
    </el-row>
    <div style="margin:1em auto;">
      <el-steps :space="350" :active="step" finish-status="success" :center="true">
        <el-step title="步骤1" description="选择摊位并提交订单"></el-step>
        <el-step title="步骤2" description="确认订单并支付"></el-step>
        <el-step title="步骤3" description="发布招聘信息"></el-step>
      </el-steps>
    </div>
    <!--选择摊位-->
    <div v-if="step=== 0" class="content">
      <ChooseBooth @returnStep="getStep" @returnData="getData"></ChooseBooth>
    </div>
    <!--确认订单并付款-->
    <div v-if="step === 1" class="content">
      <ConfirmOrderDetail @returnStep="getOrder" v-if="showOrder === false"
                          :reservationData="reservationData"></ConfirmOrderDetail>
      <OrderPayments @returnOrder="getState" v-if="showOrder === true"></OrderPayments>
    </div>
    <!--发布招聘信息-->
    <div v-if="step=== 2" class="content">
      <PublishRecruitment @returnStep="getStep" @returnData="getID"></PublishRecruitment>
    </div>
    <!--预览招聘信息-->
    <div v-if="step=== 3" class="content">
      <h2>发布成功，是否预览？</h2>
      <div class="button">
        <el-button type="primary" @click="gotopreview">确定</el-button>
        <el-button type="primary" @click="gotoone">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import OrderPayments from '@/components/paymentDetails/OrderPayments'
  import ConfirmOrderDetail from '@/components/fieldRecruiting/ConfirmOrderDetail'
  import PublishRecruitment from '@/components/fieldRecruiting/PublishRecruitment'
  import ChooseBooth from '@/components/fieldRecruiting/ChooseBooth'

  export default {
    name: 'OnlineBooking',
    data () {
      return {
        showOrder: false,
        step: 0,
        reservationData: {}, //预约订单
        publishID: ''
      }
    },
    created () {

    },
    methods: {
      getID (id) {
        this.publishID = id
      },
      getStep (step) {
        this.step = step
      },
      getData (data) {  //获取预约编号
        this.reservationData = data
      },
      //第二步获取订单支付情况
      getOrder (state) {
        if (state === true) {
          this.showOrder = true
        }
        if (state === 0) {
          this.step = state
        }
      },
      //获取支付情况
      getState (state) {
        if (state === true) {
          this.step = 2
        } else if (state === false) {
          this.$router.push({'path': '/index/nopaylist'})
        }
      },
      //预览招聘信息
      gotopreview () {
        this.$router.push({'path': '/companyinforotation/' + this.publishID})
      },
      gotoone () {
        this.step = 0
      }
    },
    components: {
      OrderPayments,
      PublishRecruitment,
      ConfirmOrderDetail,
      ChooseBooth
    }
  }

</script>

<style scoped>
  .content {
    margin-top: 2em;
    padding: 0em 4em 0em 2em;
  }

  .btns {
    width: 100%;
    float: right;
  }

  h2 {
    text-align: center;
  }

  .button {
    text-align: center;
    padding: 20px;
  }
</style>
